<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, onBeforeUnmount } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
    sDataTwo: {
        type: Array,
        default: () => [],
    },
})
const [startValue, endValue] = [0, 4]
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: "shadow",
        },
        backgroundColor: "rgba(24, 125, 255, 0.8)",
        textStyle: {
            color: "#ffffff",
        },
    },
    grid: {
        top: '12%',
        right: '5%',
        left: '2%',
        bottom: '0%',
        containLabel: true,
    },
    dataZoom: {
        show: false,
        startValue,
        endValue
    },
    xAxis: {
        type: 'category',
        data: props.xData,
        axisLine: {
            lineStyle: {
                color: '#02387B',
            },
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            // margin: 10,
            color: '#ffffff',
            textStyle: {
                fontSize: 12,
            },
            formatter: function(e) {
                let str = '';
                str = e.length > 4 ? e.slice(0, 4) + '...' : e
                return str;
            }
        },
    },
    yAxis: [
        {
            axisLabel: {
                formatter: '{value}',
                color: 'rgba(255, 255, 255, 0.5)',
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108, 128, 151, 0.3)',
                },
            },
        },
        {
            axisLabel: {
                formatter: '{value}',
                color: 'rgba(255, 255, 255, 0.5)',
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108, 128, 151, 0.3)',
                },
            },
        },
    ],
    series: [
        {
            type: 'bar',
            name: '项目数',
            data: props.sData,
            smooth: true,
            type: 'pictorialBar',
            symbol: 'path://M0, 0, L50, 0, L25, -100',
            symbolOffset: [-15, '0'],
            symbolClip: true,
            itemStyle: {
                color: '#2072FF',
            },
            lineStyle: {
                color: '#02FBFD',
                width: 3
            },
            areaStyle: {
                normal: {
                    color: '#2072FF',
                },
            },
            label: {
                normal: {
                    position: 'top',
                    color: '#fff',
                    show: false,
                    position: [-15, -20]
                },
            },
            barWidth: 20,
            yAxisIndex: 0
        },
        {
            type: 'bar',
            name: '自治区拨款总数',
            data: props.sDataTwo,
            smooth: true,
            type: 'pictorialBar',
            symbol: 'path://M0, 0, L50, 0, L25, -100',
            symbolOffset: ["10", '0'],
            symbolClip: true,
            itemStyle: {
                color: '#00C8FF',
            },
            lineStyle: {
                color: '#02FBFD',
                width: 3
            },
            areaStyle: {
                normal: {
                    color: '#00C8FF',
                },
            },
            label: {
                normal: {
                    position: [5, -20],
                    color: '#fff',
                    show: false,
                },
            },
            barWidth: 20,
            yAxisIndex: 1
        },
    ],
}
const chart = ref()
let timer2 = null
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
    // timer2 = setInterval(() => {
    //     const item1 = props.xData.shift()
    //     props.xData.push(item1)
    //     const item2 = props.sData.shift()
    //     props.sData.push(item2)
    //     myChart.setOption(option)
    // }, 5000)
})
onBeforeUnmount(() => {
    clearInterval(timer2)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
